<template>
  <view>
    <Navbar title="我的任务" bgColor="#fff" :hideBtn="true" :h5Show="false"></Navbar>
    <view class="mobile-item-container">
      <view style="font-size: 36rpx; font-weight: bold; padding: 0 0 40rpx 0;">我的任务</view>
      <u-grid col="4">
        <u-grid-item @click="onClickTaskItem(o.status)" v-for="(o, i) in tabs" :key="i">
          <view style="position: relative;">
            <u-icon :name="o.icon" color="#333" size="60rpx"></u-icon>
            <u-badge style="position: absolute; top: -5rpx; right: -10rpx;" type="error"
              numberType="overflow" max="99" :value="o.value||0" :show-zero="true"></u-badge>
          </view>
          <text class="btn-text">{{ o.label }}</text>
        </u-grid-item>
      </u-grid>
    </view>
    <Gap />

    <view style="padding: 40rpx 0; ">
      <u-cell-group>
        <u-cell title="淘宝号列表" iconStyle="color: #f9343c" icon="taobao-circle-fill" :isLink="true" @click="onClickTaobao"></u-cell>
      </u-cell-group>
    </view>
    <view style="margin-top: 200rpx; padding: 0 40rpx;">
     
      <u-button plain color="#f9343c" @click="onClickLogout">退出</u-button>
    </view>
  </view>
</template>

<script>
import Navbar from '@/components/navbar/Navbar'
import Gap from '@/components/gap/Gap'
import { globalData } from '@/config/global-data'
import { getTaskList } from '@/api/order'

export default {
  components: {
    Gap,
    Navbar,
  },
  data() {
    return {
      activeKey: 'work',
      // 2待支付 3 已完成 4 待评价 5 评价完成 6 待退款 7 退款完成 8已撤销
      taskStatus: {
      },
    }
  },
  computed: {
    tabs() {
      return [
        { label: '待支付', icon: 'clock', status: 2, key: 'waitPayNum' },
        { label: '已完成', icon: 'order', status: 3, key: 'finishNum'},
        { label: '待评价', icon: 'chat', status: 4, key: 'waitCommentNum' },
        { label: '已评价', icon: 'tags', status: 5, key: 'finishCommentNum' }
      ]
    }
  },
  onShow(){
    this.getList()
  },
  methods: {
    async getList(){
      const {data} = await getTaskList()
      console.log(data)
      this.taskStatus = data.statusData
    },
    onClickTaobao() {
      uni.navigateTo({url: '/pages/account/list'})
    },
    onClickTaskItem(status) {
      // 参数通过store临时保存下, 到我的任务列表页 获取后重置为undefined
      globalData.taskListStatus = status
      uni.switchTab({ url: '/pages/task/list' });
    },
    onClickLogout() {
      this.$store.dispatch('Logout').then(() => {
        uni.navigateTo({url: '/pages/login/index'})
      })
    }
  }
}
</script>

<style lang="scss"></style>